<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="https://cdn.layui.com/layui/2.8.15/css/layui.css">
  <style>
    /* 固定层容器 */
    .float-box {
      position: fixed;
      right: 20px;
      bottom: 20px;
      z-index: 999;
    }
    /* 收缩图标 */
    .toggle-icon {
      width: 40px;
      height: 40px;
      background: #fff;
      border-radius: 50%;
      box-shadow: 0 2px 6px rgba(0,0,0,.1);
      text-align: center;
      line-height: 40px;
      cursor: pointer;
    }
    /* 内容层 */
    .content-layer {
      width: 300px;
      height: 200px;
      background: #fff;
      box-shadow: 0 2px 12px rgba(0,0,0,.1);
      display: none; /* 初始隐藏 */
      margin-bottom: 10px;
    }
  </style>
</head>
<body>
<!-- 悬浮层 -->
<div class="float-box">
  <div class="content-layer layui-card">
    <div class="layui-card-header">可收缩层</div>
    <div class="layui-card-body">点击下方图标展开/收起内容</div>
  </div>
  <div class="toggle-icon layui-icon layui-icon-down"></div>
</div>

<script src="https://cdn.layui.com/layui/2.8.15/layui.js"></script>

<script>
  layui.use(['jquery', 'element'], function() {
    var $ = layui.jquery;
    var element = layui.element;
  
    // 图标点击事件
    $('.toggle-icon').on('click', function() {
      var content = $('.content-layer');
      var icon = $(this).find('.layui-icon');
  
      // 切换显示状态
      if (content.is(':visible')) {
        content.slideUp(200);
        icon.removeClass('layui-icon-down').addClass('layui-icon-up');
      } else {
        content.slideDown(200);
        icon.removeClass('layui-icon-up').addClass('layui-icon-down');
      }
    });
  });
  </script>
  
</body>
</html>
